/* eslint-disable react/prop-types */
import { Button, Flex, Form, Radio, RadioChangeEvent, Typography } from "antd"
import { useCallback, useEffect, useState } from "react"

import { queryRebateStatusEdit } from "@/api/member"
import { IAccountStatusAfter, IModalContent } from "@/api/member/types"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

export const RebateStatusModal: React.FC<IModalContent> = ({ handleCancel, filterInfo, userInfo }) => {
	const { formatMessage } = useLocale()
	const [rebateStatusval, setRebateStatusValue] = useState(userInfo.rebateFreezeStatus)
	const [form] = Form.useForm()
	const submit = useCallback(
		async (value: IAccountStatusAfter) => {
			const body = {
				freezeRemark: rebateStatusval === 1 ? value.remark : undefined,
				unfreezeRemark: rebateStatusval === 0 ? value.remark : undefined,
				freezeStatus: rebateStatusval,
				userId: filterInfo.userId,
				userName: filterInfo.username
			}
			const [err] = await queryRebateStatusEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[filterInfo, rebateStatusval]
	)

	useEffect(() => {}, [])

	const { loading } = useApi()
	const onChange = (e: RadioChangeEvent) => {
		setRebateStatusValue(e.target.value)
	}
	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form style={{ width: "100%" }} form={form} onFinish={submit}>
					<Flex gap={10} className="title-first">
						<Typography className="account-status">{formatMessage({ id: "member.button_permissions.rebateStatus" })}:</Typography>
						<Flex gap={40}>
							<Radio.Group name="rebateStatus" onChange={onChange} value={rebateStatusval}>
								<Radio value={0}>{formatMessage({ id: "common.account_status_normal" })}</Radio>
								<Radio value={1}>{formatMessage({ id: "risk.frozen_status" })}</Radio>
							</Radio.Group>
						</Flex>
					</Flex>
					<CustomTextArea
						placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
						name="remark"
						label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
					/>

					<Flex justify="center" wrap="wrap" gap={10}>
						<Button
							key="back"
							onClick={() => {
								handleCancel()
								form.resetFields()
							}}
						>
							{formatMessage({ id: "member.table_info.cancel" })}
						</Button>
						<Button htmlType="submit" type="primary" loading={loading}>
							{formatMessage({ id: "common.sure" })}
						</Button>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
